<template>
	<div>
		<el-card class="!border-none pt-4 mt-[20px]" shadow="never">
			<div class="topTitle font-bold main-color text-2xl mb-5">
				产品参数
			</div>
			<el-table class="mt-[20px]" size="large" :data="lists"
				:header-cell-style="{'background':'#0054A6','color':'#fff','line-height':'52px','padding':'14px 0'}"
				:cell-style="{'color':'#0054A6','padding':'20px 0'}">
				<el-table-column label="产品名称" prop="scene_name" align="center">
					<template #default="{ row }">
						<span class="main-color">22222</span>
					</template>
				</el-table-column>
				<el-table-column label="图号" prop="询价单" align="center"  />
				<el-table-column label="材质" prop="上海AAAA有限公司" align="center"/>
				<el-table-column label="件数(pcs)" prop="王小明" align="center" />
				<el-table-column label="预计单重(kg/件)" prop="待报价" align="center"/>
				<el-table-column label="单价(USD/pc)" prop="这里是描述内容" align="center" />
				<el-table-column label="产品分类" prop="这里是具体原因" align="center"/>
			</el-table>
			<!-- 审批-参数  -->
			<!-- <el-row class="mt-[20px]">
				<el-col :span="10" class="v-flex v-col-top">
					<span class="main-color">参数图片：</span>
					<div>
						<el-upload class="avatar-uploader"
							action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
							:show-file-list="false" :on-success="handleAvatarSuccess"
							:before-upload="beforeAvatarUpload" :limit="5">
							<img v-if="imageUrl" :src="imageUrl" class="avatar" />
							<el-icon v-else class="avatar-uploader-icon">
								<Plus />
							</el-icon>
						</el-upload>
						<div class="main-color1 mt-[20px]">说明：严谨上传带水印的图片</div>
					</div>
				</el-col>
			</el-row> -->
			<!-- /end -->
			<!-- 审批-外形图 -->
			<el-row class="mt-[20px]">
				<el-col :span="10" class="v-flex v-col-top">
					<span class="main-color">参考外形图纸：</span>
					<el-upload class="avatar-uploader"
						action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
						:show-file-list="false" :on-success="handleAvatarSuccess"
						:before-upload="beforeAvatarUpload" :limit="5">
						<img v-if="imageUrl" :src="imageUrl" class="avatar" />
						<el-icon v-else class="avatar-uploader-icon">
							<Plus />
						</el-icon>
					</el-upload>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="10" class="v-flex v-col-top">
					<span class="main-color">图纸标题截图： </span>
					<el-upload class="avatar-uploader"
						action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
						:show-file-list="false" :on-success="handleAvatarSuccess"
						:before-upload="beforeAvatarUpload" :limit="5">
						<img v-if="imageUrl" :src="imageUrl" class="avatar" />
						<el-icon v-else class="avatar-uploader-icon">
							<Plus />
						</el-icon>
					</el-upload>
				</el-col>
			</el-row>
			<!-- end -->
		</el-card>
		<el-card class="!border-none p-4 mt-[20px]" shadow="never">
			<div class="topTitle font-bold main-color text-2xl mb-5">
				审核信息
			</div>
			<div class="v-flex ">
				<div class="main-color w-[100px] text-right">审核状态：</div>
				<el-radio-group v-model="radio" class="ml-4" text-color="#0054a6" fill="#0054a6">
					<el-radio label="1" size="large" >审核通过</el-radio>
					<el-radio label="2" size="large">审核未通过</el-radio>
				</el-radio-group>
			</div>
			<el-row class="main-color mt-[20px]">
				<el-col :span="10"  class="v-flex v-col-top">
					<span class="w-[100px] text-right">未通过原因：</span>
					<el-input  type="textarea" :rows="3" class="flex-1 ml-[10px] w-[200px]" placeholder="请输入"></el-input>
				</el-col>
			</el-row>
		</el-card>
		<el-row class="mt-[30px]">
			<el-button class="main-color1 w-[100px] h-[36px]">
				<span>取消</span>
			</el-button>
			<el-button class="w-[100px]  h-[36px]" color="#0054A6" type="primary">
				<span>保存</span>
			</el-button>
		</el-row>
	</div>
</template>

<script lang="ts" setup>
	import type { UploadProps } from 'element-plus'
	import { Plus } from '@element-plus/icons-vue'
	const lists = ref<Array<any>>([
		{}
	])
	const imageUrl = ref('')//图片上传
	const handleAvatarSuccess : UploadProps['onSuccess'] = (
		response,
		uploadFile
	) => {
		imageUrl.value = URL.createObjectURL(uploadFile.raw!)
	}
	const beforeAvatarUpload : UploadProps['beforeUpload'] = (rawFile) => {
	
		return true
	}
	const radio = ref('1')
</script>

<style scoped lang="scss">
	.avatar-uploader .avatar {
		width: 178px;
		height: 178px;
		display: block;
	}
	
	.avatar-uploader .el-upload {
		border: 1px dashed var(--el-border-color);
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		transition: var(--el-transition-duration-fast);
	}
	
	.avatar-uploader .el-upload:hover {
		border-color: var(--el-color-primary);
	}
	
	.el-icon.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 100px;
		height: 100px;
		text-align: center;
		background: #F7F7F7;
	}
</style>